import React from 'react';
import { View, Text, Image } from '@tarojs/components';
import { sourceUrl } from '@/config';
import './index.scss';

const ProductInfoLine = ({ product = {}, className = '' }) => {
  if (!product?.optionStr) {
    let option = product.options || product.option;
    let optionObj = option ? JSON.parse(option) : {};
    let defaultOption = [];
    for (let key in optionObj) {
      defaultOption.push(optionObj[key]);
    }
    product.optionStr = defaultOption.join(' ');
  }
  // if (product.hasOwnProperty('totalPayment') == false) {
  //   product.totalPayment = product.singlePrice * product.quantity;
  // }
  if (product.hasOwnProperty('mediaUrl') == false) {
    product.mediaUrl = product.url;
  }
  return (
    <View className={'black085 productInfo ' + className}>
      <Image
        className="tGoodIcon"
        src={
          product.mediaUrl?.indexOf('http') === 0 ? product.mediaUrl : sourceUrl + product.mediaUrl
        }
      />
      <View className="column">
        <Text className="txt28 black085 bold txtDot name">{product.title || ''}</Text>
        <Text className="txt20 black05 txtDot option">{product.optionStr}</Text>
      </View>
      <View className="txt24">x{product.quantity}</View>
      <View className="txt26 bold flex1right">¥{product.singlePrice || product.singlePayment}</View>
    </View>
  );
};

export default ProductInfoLine;
